<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定三种方式的区别</title>
</head>
<body>
<input type="button" name="" onclick="f1()" onclick="f()" value="按钮">
<input type="button" id="btn" value="js中绑定">
<input type="button" id="btn2" value="事件监听的方式">
<input type="button" id="btn3" value="移除绑定事件">
<script type="text/javascript">
    //1、行内绑定事件  标签.onclick事件属性 = "js代码"
    //如果一个标签绑定了多个事件，则始终执行第一次绑定的事件
    function f() {
        console.log(456);
        alert(456);
    }
    function f1() {
        console.log(123);
        alert(123);
    }

    //2、js中通过标签的时间属性绑定
    //如果同一个标签同一个事件，绑定了多次，始终执行最后一次绑定的事件（按代码从上直下的顺序），
    document.getElementById("btn").onclick = function () {
        console.log("js中通过标签的时间属性绑定");
        alert("js中通过标签的时间属性绑定");
    }
    document.getElementById("btn").onclick = function () {
        console.log("第二次绑定--js中通过标签的时间属性绑定");
        alert("第二次绑定--js中通过标签的时间属性绑定");
    }
    //可以拆分为以下步骤
    /*function f1() {
      console.log("js中通过标签的时间属性绑定(拆分)");
      alert("js中通过标签的时间属性绑定(拆分)");
    }
    var btn = document.getElementById("btn");
    btn.onclick = f1;*/

    //3、事件监听的方式
    //所有绑定的事件按照从上至下的顺序依次执行，先绑定，先执行
    document.getElementById("btn2").addEventListener("click", function () {
        console.log("事件监听的方式");
        alert("事件监听的方式");
    })
    document.getElementById("btn2").addEventListener("click", function () {
        console.log("事件监听的方式 第二次绑定");
        alert("事件监听的方式 第二次绑定");
    })

    // 总结：行内绑定的方式  不推荐使用（js和html混合在一起，不方便后期维护）
    // js中事件属性方式绑定 自己写简单效果，可以使用，（不进行多次绑定）
    // 事件监听方式  复杂的html页面（js非常多），推荐使用（可以多次绑定）

    //移除绑定事件方式：
    //行内绑定、js中事件属性绑定的方式: 直接重新设置值 btn.onclick = "";
    //事件监听的方式：                移除就用removeEventListener()方法 参数绑定是必须完全一致，即不能用上述的function()，因为上述function()定义的为两个匿名函数，所以会移除失败
    var f = function() {
        console.log("移除绑定事件（未移除！）");
        alert("移除绑定事件（未移除！）");
    }
    document.getElementById("btn3").addEventListener("click", f);   //绑定事件
    document.getElementById("btn3").removeEventListener("click", f);    //移除事件
</script>
</body>
</html>